<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" href="../../css/mui.min.css">
	</head>
	<style>
		#topPopover {
				position: fixed;
				top: 10px;
				right: 6px;
			}		
			.mui-popover {
				height: 130px;
				width:98%;
			}
			.aui-btn{
			background-color:#d3d3d3;
			}
	</style>
	<body  style="background: #ffffff">
	<div class="aui-border-tb" style="padding: 10px;height:45px;text-align: center">
	
		<span style="width: 25%;float: left"><b>综合</b></span>
		<span style="width: 25%;float: left"><b>销量</b><span class="aui-iconfont aui-icon-order"></span></span>
		<span style="width: 25%;float: left"><b>价格</b><span class="aui-iconfont aui-icon-order"></span></span>
		<span style="width: 25%;float: left"><b>推荐</b></span>
	</div>
	<div class="aui-border-b" style="height: 45px;padding-top: 5px" >	
	    <a class="mui-tab-item" href="#topPopover"><span class="aui-btn "  style="width: 22%;float: left;margin-left:10px;margin-right: 5px">进口</span></a>
		<a class="mui-tab-item" href="#bottomPopover"><span class="aui-btn "  style="width: 22%;float: left;margin-right: 5px">进口</span></a>
		<a class="mui-tab-item" href="#topPopover"><span class="aui-btn "  style="width: 22%;float: left;margin-right: 5px">进口</span></a>
		<a class="mui-tab-item" href="#topPopover"><span class="aui-btn "  style="width: 22%;float: left;margin-right: 5px">进口</span></a>
		
		
		<div style="clear: both"></div>
	
	</div>
	 <ul class="aui-list-view">
            
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
             <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
              <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
              <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
              <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
              <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
              <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
              <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" style="max-width:  100px;height: 100px" src="../../image/demo5.png">
                <div class="aui-img-body" >
                    <p class='aui-ellipsis-2'>【豪华版】巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶巴拉巴拉小魔仙玩偶</p>
                	<p style="color: red"> ¥998.00</p>
                	<p>136条评价  &nbsp;好评98%</p>
                </div>
            </li>
            
        </ul>
	<div id="topPopover" class="mui-popover" style="padding: 10px">
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px;margin-left: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px;margin-left: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px;margin-left: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>

		</div>
		<div id="bottomPopover" class="mui-popover" style="padding: 10px">
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px;margin-left: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px;margin-left: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px;margin-left: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>
			<span class="aui-btn" style="width: 23%;float: left;margin-right: 5px;margin-bottom: 5px">外贸</span>

		</div>
		 
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-waterfall.js" ></script>
	<script src="../../script/mui.min.js"></script>
	<script type="text/javascript">
		
		apiready = function() {
		
		mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});}
	</script>
</html>